<template>
    <div class="banner-detail" v-loading="loading">
        <el-form label-position="left" :model="detail" label-width="70px" class="form-box input-no-border-box">
            <el-form-item label="正在展示" prop="bannerUrl">
                <UploadImg v-model="detail.bannerUrl" :width="1080" :height="648"/>
            </el-form-item>
        </el-form>

        <div class="tools">
            <el-button @click="goBack" class="btn save-btn">返回</el-button>
            <el-button type="success" class="btn save-btn" @click="saveBanner">保存头图</el-button>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            detail: {
                bannerUrl: '',
                id: null
            },
            loading: false // 详情加载loading
        }
    },
    created () {
        this.getDetail()
    },
    methods: {
        // 获取详情
        async getDetail () {
            this.loading = true
            let res = await this.$http.get('/trade/selectHeadBanner')
            if (res.code === '0') {
                this.detail = res.data[0]
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },
        // 返回上一页
        goBack () {
            this.$router.go(-1)
        },
        // 保存
        saveBanner () {
            if (!this.detail.bannerUrl) {
                return this.$message({
                    type: 'error',
                    message: '请上传头图'
                })
            }
            this.$http.post('/trade/headBanner', this.detail).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .form-box {
        max-width: 500px;
    }

    .tools {
        margin-top: 20px;
        padding-bottom: 20px;
        .save-btn {
            margin-left: 80px;
        }
        .btn {
            width: 120px;
            padding: 10px;
        }
    }
</style>
